<template>
  <div>
    <h2>组件通信-子组件</h2>
    <ul>
      <li>{{ count }}</li>
      <li>{{ obj }}</li>
    </ul>
    <button @click="changeParent">修改父组件的变量</button>
  </div>
  <hr />
  <GrandSon />
</template>

<script>
import GrandSon from './grandson.vue'
export default {
  components: {
    GrandSon
  },
  // vue3子传父的事件名，需要在这里声明下
  emits: ['change-obj'],
  props: {
    count: {
      type: Number,
      default: 0
    },
    obj: {
      type: Object,
      default: () => ({})
    }
  },
  setup (props, { emit }) {
    console.log('vue3获取父传子变量:', props, props.count, emit)
    const changeParent = () => {
      // props.count++ // 不能修改
      // props.obj.age = Math.random() * 100 + 1 // 可以改
      // props.obj = {} // 不能改
      // 子传父
      // emit === this.$emit
      emit('change-obj', Math.random() * 100 + 1)
    }
    return { changeParent }
  },
  created () {
    console.log('vue2获取父传子的变量：', this.count, this.$emit)
  }
}

</script>

<style lang="scss" scoped>
</style>
